<template>
    <view class="container">
        <view class="container__header">
            <uv-navbar title="测评项目" :placeholder="true" bgColor="transparent" :fixed="true">

            </uv-navbar>
        </view>
        <view class="container__content">
            <view class="bgc-ffffff rounded-20 p-30 opacity-90">
                <view class="text-center fw-600">MBTI职业性格测试</view>
                <view class="py-30 text-justify">
                    MBTI职业性格测试基于迈尔斯-布里格斯类型指标（MBTI），通过评估你的性格偏好（如外向/内向、直觉/感觉、思考/情感、判断
                </view>
                <view class="flex justify-between p-20">
                    <view class="flex flex-col items-center">
                        <view class="fw-600">
                            93题
                        </view>
                        <view class="mt-15 fs-26 c-888888">测评内容</view>
                    </view>
                    <uv-line direction="col" length="48"></uv-line>
                    <view class="flex flex-col items-center">
                        <view class="fw-600">
                            6分钟
                        </view>
                        <view class="mt-15 fs-26 c-888888">预计用时</view>
                    </view>
                    <uv-line direction="col" length="48"></uv-line>
                    <view class="flex flex-col items-center">
                        <view class="fw-600">
                            12页
                        </view>
                        <view class="mt-15 fs-26 c-888888">报告解读</view>
                    </view>
                </view>
                <view class="py-30">
                    <Mybutton :transition="true" color="#fff" title="开始测评" @click="toDetail" />
                </view>
            </view>
            <view class="mt-40">
                <view class="fw-600">
                    测评须知：
                </view>
                <view class="py-30 fs-26 c-888888">
                    测评目的：MBTI职业性格测试旨在帮助你了解自己的性格类型，明确职业倾向、行为模式与沟通风格，为职业规划与个人发展提供参考。
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import Mybutton from "@/components/Button.vue";
    const toDetail = () => {
        uni.navigateTo({
            url: "/pages/task/exam"
        })
    }
</script>

<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        background: linear-gradient(to bottom, #cfa8fc, #f0f2f5);
        padding: 30rpx;
        box-sizing: border-box;
    }
</style>